<template>
	<view class="i-card"
		:style="{width: 'calc(100% - ' + width + ')', 	borderRadius: radius, marginTop: top, border, background, marginBottom: bottom}"
		@click.stop="handleClick">
		<view class="cards" :style="{padding}">
			<slot></slot>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import {
		defineProps,
		defineEmits
	} from 'vue'
	defineProps({
		top: {
			type: String,
			default: '0'
		},
		bottom: {
			type: String,
			default: '0'
		},
		padding: {
			type: String,
			default: '32rpx'
		},
		border: {
			type: String,
			default: 'none'
		},
		background: {
			type: String,
			default: '#fff'
		},
		width: {
			type: String,
			default: '48rpx'
		},
		radius: {
			type: String,
			default: '16rpx'
		}
	})
	const emit = defineEmits([
		'click'
	])
	const handleClick = () => {
		emit('click')
	}
</script>

<style lang="scss" scoped>
	.i-card {
		margin: 0 auto;
		overflow: hidden;
		box-sizing: border-box;
		overflow: hidden;
	}
</style>